<template>
    <div class="demo-basic">
        <section>
            <h3>确定 取消</h3>
            <p>
                <z-button type="ensure" shape="rect"></z-button>
                <z-button type="ensure" shape="rect" disabled>提交</z-button>
                <z-button type="ensure" shape="rect" @click="echo('点击事件')">点击事件</z-button>
            </p>
            <p>
                <z-button type="cancel" shape="rect"></z-button>
                <z-button type="cancel" shape="rect" disabled></z-button>
            </p>
            <pre>
                <code>
        &lt;z-button type=&quot;ensure&quot; shape=&quot;rect&quot;&gt;&lt;/z-button&gt;
        &lt;z-button type=&quot;ensure&quot; shape=&quot;rect&quot; disabled&gt;提交&lt;/z-button&gt;
        &lt;z-button type=&quot;ensure&quot; shape=&quot;rect&quot; @click=&quot;echo(&#x27;点击事件&#x27;)&quot;&gt;点击事件&lt;/z-button&gt;
        &lt;z-button type=&quot;cancel&quot; shape=&quot;rect&quot;&gt;&lt;/z-button&gt;
        &lt;z-button type=&quot;cancel&quot; shape=&quot;rect&quot; disabled&gt;&lt;/z-button&gt;
                </code>
            </pre>
        </section>

        <section>
            <h3>确定 取消<small>圆角</small></h3>
            <p>
                <z-button type="ensure" shape="icon"></z-button>
                <z-button type="ensure" shape="icon" disabled></z-button>
            </p>
            <p>
                <z-button type="cancel" shape="icon"></z-button>
                <z-button type="cancel" shape="icon" disabled></z-button>
            </p>
            <pre>
                <code>
        &lt;z-button type="ensure" shape="icon"&gt;&lt;/z-button&gt;
        &lt;z-button type="ensure" shape="icon" disabled&gt;&lt;/z-button&gt;
        &lt;z-button type="ensure" shape="icon"&gt;&lt;/z-button&gt;
        &lt;z-button type="ensure" shape="icon" disabled&gt;&lt;/z-button&gt;
                </code>
            </pre>
        </section>

        <section>
            <h3>添加 删除</h3>
            <p>
                <z-button type="add" shape="icon"></z-button>
                <z-button type="add" shape="icon" disabled></z-button>
                <z-button type="add" shape="icon" @click="echo('点击了添加')"></z-button>
            </p>
            <p>
                <z-button type="remove" shape="icon"></z-button>
                <z-button type="remove" shape="icon" disabled></z-button>
                <z-button type="remove" shape="icon" @click="echo('点击了删除')"></z-button>
            </p>
            <pre>
                <code>
        &lt;z-button type=&quot;add&quot; shape=&quot;icon&quot;&gt;&lt;/z-button&gt;
        &lt;z-button type=&quot;add&quot; shape=&quot;icon&quot; disabled&gt;&lt;/z-button&gt;
        &lt;z-button type=&quot;add&quot; shape=&quot;icon&quot; @click=&quot;echo(&#x27;点击了添加&#x27;)&quot;&gt;&lt;/z-button&gt;
        &lt;z-button type=&quot;remove&quot; shape=&quot;icon&quot;&gt;&lt;/z-button&gt;
        &lt;z-button type=&quot;remove&quot; shape=&quot;icon&quot; disabled&gt;&lt;/z-button&gt;
        &lt;z-button type=&quot;remove&quot; shape=&quot;icon&quot; @click=&quot;echo(&#x27;点击了删除&#x27;)&quot;&gt;&lt;/z-button&gt;
                </code>
            </pre>
        </section>

        <!-- <section>
            <h3>字体按钮</h3>
            <p>
                <z-button type="shuaxin" shape="font" title="刷新"></z-button>
                <z-button type="user" shape="font"></z-button>
                <z-button type="trash" shape="font"></z-button>
                <z-button type="icon-batch" shape="font" style="font-size: 24px; color: #737373" class="demo1 demo2"></z-button>
            </p>
            <pre>
                <code>
        &lt;z-button type=&quot;shuaxin&quot; shape=&quot;font&quot;&gt; title=&quot;刷新&quot;&lt;/z-button&gt;
        &lt;z-button type=&quot;user&quot; shape=&quot;font&quot;&gt;&lt;/z-button&gt;
        &lt;z-button type=&quot;trash&quot; shape=&quot;font&quot;&gt;&lt;/z-button&gt;
        &lt;z-button type=&quot;icon-batch&quot; shape=&quot;font&quot; style=&quot;font-size: 24px; color: #737373&quot; class=&quot;demo1 demo2&quot;&gt;&lt;/z-button&gt;

        // 字体按钮的type值参照 <a href="http://h5.cs2025.com/static/web_font/demo_fontclass.html" target="_blank">中铝视拓字体库</a>,对应各字体"icon-"后的相应字母
                </code>
            </pre>
        </section> -->

        <section>
            <h3>复选框</h3>
            <p>
                <Checkbox></Checkbox>
                <Checkbox disabled></Checkbox>
            </p>
            <p>
                <Checkbox v-model="cChecked"></Checkbox>
                <Checkbox v-model="cChecked" disabled></Checkbox>
            </p>
            <pre>
                <code>
        &lt;Checkbox&gt;&lt;/Checkbox&gt;
        &lt;Checkbox disabled&gt;&lt;/Checkbox&gt;
        &lt;Checkbox v-model="checked"&gt;&lt;/Checkbox&gt;
        &lt;Checkbox v-model="checked" disabled&gt;&lt;/Checkbox&gt;

        ...
        data: function () {
            return {
                checked: true
                ...
            }
        }
                </code>
            </pre>
        </section>

        <section>
            <h3>单选框</h3>
            <p>
                <Radio></Radio>
            </p>
            <p>
                <Radio v-model="rChecked"></Radio>
            </p>
            <pre>
                <code>
        &lt;Radio&gt;&lt;/Radio&gt;
        &lt;Radio v-model="checked&gt;&lt;/Radio&gt;

        ...
        data: function () {
            return {
                checked: true
                ...
            }
        }
                </code>
            </pre>
        </section>
    </div>
</template>

<script>
    import hljs from 'highlight.js'
    export default {
        data: function () {
            return {
                cChecked: true,
                rChecked: true
            }
        },
        methods: {
            echo: function (msg) {
                alert(msg)
            }
        },
        // 组件被挂载的时候执行的方法
        mounted: function () {
            window.setTimeout(function () {
                $('.demo-basic pre code').each(function(i, block) {
                    hljs.highlightBlock(block);
                });
            }, 0);
        }
    }
</script>
